<template>
  <div>
    <a-modal
      width="600px"
      :title="modalTitle"
      :visible="isVisible"
      :footer="null"
      @cancel="onCancel"
    >
      <div class="success-wrapper">
        <icon-font class="success-icon" type="ic-online" />
        <h3 class="success-title">{{ $t('subAccount.addSuccess') }}</h3>
        <div class="success-tip">
          {{ $t('subAccount.addSuccessTip') }}
        </div>
        <div class="success-info-wrapper">
          <div class="info-item">
            <span class="info-label">{{ $t('subAccount.url') }}</span>
            <span class="info-value">{{ sysUrl }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">{{ $t('common.account') }}</span>
            <span class="info-value">
              {{ accountRecord.account }}
            </span>
          </div>
          <div class="info-item">
            <span class="info-label">{{ $t('common.password') }}</span>
            <span v-show="isPwdVisible">
              {{ accountRecord.password }}
            </span>
            <span v-show="!isPwdVisible"> ********************** </span>
            <icon-font
              :type="pwdIconType"
              class="pwd-icon"
              @click="onTogglePwd"
            ></icon-font>
          </div>
        </div>
        <div>
          <a-button @click="onDownloadCsv">
            {{ $t('subAccount.downCsv') }}
          </a-button>
          <a-button type="primary" @click="copyText" style="margin-left: 12px">
            <icon-font type="ic-copy" />
            {{ $t('common.copy') }}
          </a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'subAccountSuccessModal',
  components: {},
  props: {},
  data() {
    return {
      isVisible: false,
      isPwdVisible: false,
      modalTitle: this.$t('subAccount.title1'),
      accountRecord: {},
    };
  },
  computed: {
    sysUrl() {
      return location.origin + location.pathname;
    },
    pwdIconType() {
      if (this.isPwdVisible) {
        return 'ic-preview-open';
      } else {
        return 'ic-preview-close';
      }
    },
  },
  watch: {},
  methods: {
    onDownloadCsv() {
      const url = `${this.$t('subAccount.url')}: ${this.sysUrl}`;
      const account = `${this.$t('common.account')}: ${
        this.accountRecord.account
      }`;
      const password = `${this.$t('common.password')}: ${
        this.accountRecord.password
      }`;
      const content = `${url}\n${account}\n${password}\n`;

      const blob = new Blob([content], { type: 'text/plain;charset=utf-8;' });
      const contentUrl = URL.createObjectURL(blob);

      const link = document.createElement('a');
      link.href = contentUrl;
      link.download = 'authSysSubAccount.txt';
      link.style.display = 'none';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(contentUrl);
    },

    onTogglePwd() {
      this.isPwdVisible = !this.isPwdVisible;
    },

    copyText() {
      const url = `${this.$t('subAccount.url')}: ${this.sysUrl}`;
      const account = `${this.$t('common.account')}: ${
        this.accountRecord.account
      }`;
      const password = `${this.$t('common.password')}: ${
        this.accountRecord.password
      }`;
      const result = `${url}\n${account}\n${password}\n`;
      this.$copyText(result).then((e) => {
        this.$message.success(this.$t('subAccount.copySuccess'));
      });
    },
    openModal(accountRecord) {
      this.accountRecord = accountRecord;
      this.isVisible = true;
    },
    onCancel() {
      this.isVisible = false;
    },
  },
};
</script>
<style lang="less" scoped>
.success-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  .success-title {
    font-weight: 500;
    margin: 0;
  }
  .success-icon {
    font-size: 48px;
    color: @success-color;
  }
  .success-tip {
    font-size: 12px;
    color: @text-placeholder;
    margin-top: -8px;
  }
  .success-info-wrapper {
    background: @theme-light;
    border-radius: 8px;
    padding: 24px 60px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    .info-item {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .info-label {
      flex-shrink: 0;
      display: inline-block;
      width: 120px;
      color: @gray-7;
    }
    .pwd-icon {
      font-size: 16px;
      color: @theme-color;
    }
  }
}
</style>
